<template>
	<view class="instock-details-page">
		<view class="outstock-info">
			<view class="title-con c-flex jc-between c-item-center" >
				<view class="c-flex jc-start c-item-center" >
					<image class="time-icon" :src="stockImgUrl+'stock-manage-time.png'"></image>
					<view class="title-1">创建时间：{{item.createTime}} </view>
					<template v-if="stockType == 5">
						<image class="status" v-if="item.status == 0" :src="stockImgUrl+'stock-manage-weichuku.png'"></image>
						<image class="status" v-if="item.status == 2" :src="stockImgUrl+'stock-manage-ywc.png'"></image>
						<image class="status" v-if="item.status == 1" :src="stockImgUrl+'stock-manage-jxz.png'"></image>
						<image class="status" v-if="item.status == 4" :src="stockImgUrl+'stock-manage-yiguanbi.png'"></image>
					</template>
				</view>
				<image class="status" style="width:40rpx;height:40rpx;" v-if="item.status == 1" :src="stockImgUrl+'stock-manage-close.png'"></image>
				
			</view>
			<view class="p-content c-flex c-flex-col" >
				<view class="p-c-item" >
					<text>订单编号: </text><text>{{item.code}}</text>
				</view>
				<view class="p-c-item" >
					<text>出库方: </text><text>{{item.sourceName||'-'}}</text>
				</view>
				<view class="p-c-item" >
					<text>收货方: </text><text>{{item.targetName||'-'}}</text>
				</view>
				<view class="p-c-item" >
					<text>订单数量: </text><text>{{item.subPlanSingleNum}}瓶</text>
				</view>
			</view>
		</view>
		<order-table :headers="headers" :list="list"></order-table>
		
	</view>
</template>

<script>
	import OrderTable from './components/order-table.vue';
	export default {
		components:{OrderTable},
		data() {
			return {
				stockImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/stock/',
				item:null,
				headers:[{name:'产品名称',field:'productName'},{name:'订单数量',field:'planSingle'},{name:'出库数量',field:'actSingle'}],
				list:[],
				stockType:''
			};
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor:'#000000'
			});
			this.item = JSON.parse(options.item);
			this.initInfo(this.item.id);
		},
		methods:{
			initInfo(id){
				this.$API.findStockBillInfo(id).then(res=>{
					this.stockType = res.tydStockBill.stockType;
					this.setTableHeader();
					this.list = res.tydStockBill.list.map(item=>{
						item['code']= [];
						item['count'] = 0;
						return item;
					})
				});
			},
			setTableHeader(){
				if(this.stockType == 5){
					this.title = '出库';
					this.headers = [{name:'产品名称',field:'productName'},{name:'订单数量',field:'planSingle'},{name:'已出数量',field:'actSingle'}];
				}
				if(this.stockType == 6){
					this.title = '出库';
					this.headers = [{name:'产品名称',field:'productName'},{name:'出库数量',field:'actSingle'}];
				}
				if(this.stockType == 1 ||this.stockType == 7 ||this.stockType == 8||this.stockType == 0 ){
					this.headers = [{name:'产品名称',field:'productName'},{name:'入库数量',field:'actSingle'}];
					this.title = '入库';
				}
			}
		}
	}
</script>

<style lang="scss">
.instock-details-page{
	font-family: PingFangSC, PingFang SC;height:100%;padding:20rpx;
	position:relative; background-image: linear-gradient(rgba(249, 195, 115, .3) 10%,#F9F9F9 50%);
	.title{
		font-weight: 600;font-size: 30rpx;color: #333333;position:relative;    padding-left: 30rpx;
		&::after{
			content: '';display: inline-block;  position: absolute;
			width: 10rpx;height: 32rpx;background-image: linear-gradient(#F18858 10%, #E86547 50%);
			left: 8rpx;top: 2px;border-top-left-radius: 7rpx;border-bottom-right-radius: 7rpx;transform: rotate(14deg);
		}
	}
	.outstock-info{
		background: #FFFFFF;border-radius: 18rpx;padding: 15rpx 28rpx 20rpx;margin-bottom:20rpx;position:relative;
		.title-con{
			.d_icon{
				margin-right: 10rpx;width: 14rpx;height: 32rpx;background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);transform:skewX(-12deg)
			}
			.time-icon{width: 50rpx;height: 50rpx;    margin-right: 16rpx;}
			border-bottom: 2rpx solid #F7F7F7;padding-bottom: 12rpx;
			.status{width:84rpx;height:38rpx;}
			.title-1{
				font-size: 26rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 400;color: #333333;margin-right: 8rpx;
			}
		}
		.p-content{
			margin: 16rpx 0 16rpx;background: #F9F9F9;border-radius: 16rpx;padding: 24rpx 22rpx;gap:20rpx;
			.p-c-item{
				font-family: PingFang-SC, PingFang-SC;font-weight: 500;
				text:first-child{font-size: 26rpx;color: #666666;display: inline-block;width: 170rpx;}
				text:nth-child(2){font-size: 26rpx;color: #333333;font-weight: 600;}
			}
		}
	}
	.upload-bt{
		width: 710rpx;height: 84rpx;line-height: 84rpx;text-align: center;position: absolute;bottom: 256rpx;
		background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
		border-radius: 16rpx;border: 2rpx solid #E96949;color:#ffffff;
	}
	.continue-add-bt{
		width: 710rpx;height: 84rpx;line-height: 84rpx;text-align: center;border-radius: 16rpx;border: 2rpx solid #E96949;
		font-weight: 500;font-size: 28rpx;color: #E86748;position: absolute;bottom: 148rpx;
	}
}
</style>
